<script setup>
import { Image } from "vant";
import { defineProps, computed } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const { item } = defineProps({
  item: {
    type: Object,
  },
});
const scrollTextArr = computed(()=> {
    let text = item.act_label_desc;
    let arr = [];
    for (let i = 0; i < text.length; i += 4) {
      arr.push(text.substr(i, i + 4));
    }
    return arr;
});

const jumpToDetail = () => {
  router.push("/home/info?product_id="+item.product_id);
};
</script>

<template>
  <div @click="jumpToDetail" class="product-item-grad">
    <div class="image van-image">
      <Image class="van-image__img" :src="item.product_img" />
    </div>
    <div class="name">{{ item.product_name }}</div>
    <div class="tag">{{ item.profit_data }}</div>
    <div class="desc">{{ item.price_type_desc }}{{ item.price }}元</div>
    <div data-v-02bb6fe1="" class="status">
      <div
        data-v-02bb6fe1=""
        class="scroll-wrap"
        :class="{ 'move-animi': scrollTextArr.length > 1 }"
      >
        <div
          v-for="(item, index) in scrollTextArr"
          :key="index"
          data-v-02bb6fe1=""
          class="text"
        >
          {{ item }}
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.product-item-grad {
  width: 111px;
  height: 142px;
  border-radius: 5px;
  margin-bottom: 7.5px;
  background-color: #fff;
  box-shadow: 0 0 6.5px 2px hsla(0, 0%, 73.3%, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.product-item-grad .image {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  margin-top: 23px;
  overflow: hidden;
}
.product-item-grad .name {
  font-size: 13px;
  color: #333;
  font-weight: 700;
  margin-top: 6px;
}
.product-item-grad .tag {
  padding: 0 5px;
  height: 16px;
  font-size: 10px;
  color: #666;
  font-weight: 400;
  text-align: center;
  line-height: 16px;
  margin-top: 4.5px;
  background-color: #f5f5f5;
}
.move-animi {
  animation: move-02bb6fe1 5s linear infinite
}

@keyframes move-02bb6fe1 {
  0% {
      transform: translateY(0)
  }

  10% {
      transform: translateY(-17PX)
  }

  50% {
      transform: translateY(-17PX)
  }

  60% {
      transform: translateY(0)
  }

  to {
      transform: translateY(0)
  }
}
.product-item-grad .desc {
  font-size: 10px;
  color: #fc5e10;
  font-weight: 500;
  margin-top: 6px;
  text-align: center;
}
.product-item-grad .status {
  width: 55px;
  height: 17px;
  line-height: 17px;
  text-align: center;
  font-size: 12px;
  color: #fff;
  font-weight: 500;
  position: absolute;
  left: 0;
  top: 0;
  background: url(https://cdn.jipaikeji.com/statics/weapp/icon/icon-tag2.png)
    50%/100% 100% no-repeat;
  overflow: hidden;
}
.product-item-grad {
  margin-left: 9px;
}
</style>
